<template>
	<view class="body">
		<view v-if="true" class="card-box">
			<view class="big-goods  u-flex u-p-20 u-col-top" v-for="item in resList" :key="item.id"
						@tap="jump('/pages/goods/detail', { id: item.id })">
						<image class="goods-img" :src="item.img" mode="aspectFill"></u-image>
							<view class=" card-right u-m-l-20 u-flex-col u-row-between">
								<view class="">
									<view class="goods-title u-ellipsis-1 u-m-t-10 u-m-b-10">
										<view class="live-box" >{{hotname}}</view>
										<view class="titles">
											{{ item.name }}
										</view>
									</view>
									<view class="subtitle-text u-m-b-10 u-ellipsis-1">{{ item.subtitle?item.subtitle:"" }}</view>
								</view>
			
								<view class="u-flex u-m-y-10 u-row-between">
									<!-- 	<u-line-progress
									style="width:210rpx;"
									height="18"
									:show-percent="false"
									:percent="Number(item.sales/item.allsyock*100)"
									inactive-color=" #e7e7e7"
									active-color="#ffbbbb "
								></u-line-progress>
			-->
									<view v-if="item.marketPrice" class="progress-text">
									<span style="color: #919191;">市场价</span>
									<span class="marketPrice">￥{{item.marketPrice }}</span>
									</view>
									<view v-else style="height: 50rpx;"></view>
									<!-- 	<view class="origin-price" style="width: 70rpx;text-align: center;border: 1rpx #f1f1f1 solid; border-radius: 10rpx;">
										包邮
									</view>
									 -->
								</view>
			
								<view class=" u-flex u-row-between u-col-center">
									<view class="u-flex u-col-bottom">
										<view class="price u-m-r-10">￥{{ item.price }}</view>
										<!-- <view class="progress-text">补贴￥{{ ((item.price-item.cost)* item.rebate/100).toFixed(2)}}</view> -->
										<view class="origin-price">
										</view>
									</view>
									<button class="u-reset-button buy-btn">立即购买</button>
								</view>
							</view>
					</view>
			<!-- 加载更多 -->
			<u-loadmore v-show="isEmpty" height="80rpx" :status="loadStatus" icon-type="flower" color="#ccc" />
		</view>
		<view v-else class="">
			暂无商品
		</view>
		<view class="upward" v-if="isShow"	@click="pullTop()"> <u-icon name="arrow-upward"	color="#999" size="28"> </u-icon></view>
	</view>
</template>

<script>
	import share from '@/ljshop/share';
	export default{
		data(){
			return{
				UId: uni.getStorageSync('UId'),
				USER_INFO: uni.getStorageSync('userinfo'),
				loadStatus: 'loadmore', //loadmore-加载前的状态，loading-加载中的状态，nomore-没有更多的状态
				isEmpty: false,
				page: 0,
				SIZE: 10,
				resList:[],
				onEnd: false,
				hotname:'直播优品',
			}
		},
		created() {
			this.getList()
			this.getInfo()
			
		},
		onReachBottom() {
			if(this.onEnd) return
			this.page += 1
			this.getList()
		},
		// 监听页面卸载 清空分享
		onUnload() {
			share.setShareInfo();
		},
		onPageScroll(e) {
			if (e.scrollTop > 500) {
				this.isShow = true;
			} else {
				this.isShow = false;
			}
		},
		methods:{
			pullTop() {
				uni.pageScrollTo({
					scrollTop: 0, //滚动到距离顶部为0
					duration: 500 //滚动时长
				})
			},
			getInfo(){
				this.$http('goods.liveInfo',{})
				.then(res =>{
					if(res.label != null){
						this.hotname = res.label
					}
					uni.setNavigationBarTitle({
						title: res.title
					})
					share.setShareInfo({
						title: res.title,
						desc: res.label,
						image: res.liveshare,
						//path:"/pages/goods/wxminidetail",
						path:"pages/goods/liveselect?id=1",
						params: {
							shareUId:uni.getStorageSync("UId")
						}
					});
				})
			},
			getList(){
				let that = this 
				that.isEmpty = true
				that.loadStatus = 'loading'
				that.$http('goods.liveList',{
					page:that.page,
					size:that.SIZE
				})
				.then(res =>{
					if(res.productList.length > 0){
						let list = res.productList
						that.resList.length == 0 ? that.resList = list : that.resList = that.resList.concat(list)
						res.productList.length == 10 ? that.loadStatus = 'loadmore' : that.loadStatus = 'nomore'
					}else{
						// 没有更多
						that.onEnd = true
						that.loadStatus = 'nomore'
					}
					console.log(res);
				})
			},
			// 路由跳转
			jump(path, parmas) {
				
				this.$Router.push({
					path: path,
					query: parmas
				});
			},
		}
	}
</script>

<style lang="scss">
	.card-box{
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.seckill-card {
		// background: linear-gradient(#faf5e9 20%, #fff 30%, #fff 100%);
	}
	
	.seckill-title {
		background: url($IMG_URL+'/imgs/tag/seckill_title_bg.png') no-repeat;
		background-position: center top;
		background-size: 100% auto;
	}
	
	.activity-wrap {
	
		min-height: 300rpx;
	
		.title-box {
			.title-text {
				font-size: 32rpx;
				font-weight: bold;
				color: #FFF;
			}
	
			.more-box {
				.more-text {
					font-size: 22rpx;
					font-weight: 500;
					color: #333333;
				}
	
				.more-icon {
					font-size: 24rpx;
					color: #333333;
				}
			}
		}
	
		.scroll-box,
		.goods-box {
			height: 380rpx;
			width: 100%;
		}
	}
	
	// 小商品卡片
	.min-goods {
		width: 220rpx;
		height: 380rpx;
		background: #fff7f7;
		box-shadow: 0px 7rpx 7rpx 0px rgba(255, 80, 94, 0.32);
		border-radius: 10rpx;
	
		.img-box {
			width: 220rpx;
			height: 220rpx;
			overflow: hidden;
			position: relative;
			border-radius: 10rpx 10rpx 0 0;
	
			.img {
				width: 220rpx;
				height: 220rpx;
				background-color: #ccc;
			}
		}
	
		.mgoods-card-bottom {
			height: 160rpx;
			background: url($IMG_URL+'/imgs/tag/seckill_goods_bg.png') no-repeat;
			background-position: bottom center;
			background-size: 100% 100%;
		}
	
		.goods-title {
			font-size: 26rpx;
			font-weight: 500;
			color: #000000;
			line-height: 26rpx;
		}
	
		.price-box {
			.price {
				font-size: 30rpx;
				font-weight: 500;
				color: #ff0000;
	
				&::before {
					font-size: 24rpx;
				}
			}
	
			.original-price {
				font-size: 20rpx;
				font-weight: 500;
				text-decoration: line-through;
				color: #c4c4c4;
			}
		}
	}
	
	// 大商品卡片
	.big-goods {
		width: 710rpx;
		margin-top: 20rpx;
		min-height: 260rpx;
		background: #ffffff;
		box-shadow: 0px 7rpx 8rpx 1rpx rgba(254, 76, 29, 0.05);
		border-radius: 20rpx;
	
		.goods-img {
			width: 220rpx;
			height: 220rpx;
			border-radius: 6rpx;
		}
	
		.card-right {
			width: 430rpx;
			height: 100%;
		}
	
		.goods-title {
			font-size: 26rpx;
			// font-weight: 600;
			width: 440rpx;
			color: #000000;
			display: flex;
			align-items: center;
			// line-height: auto;
			.live-box{
				font-weight: 600;
				// width: 150rpx;
				text-align: center;
				background-color: #2960e4;
				color: #fff;
				font-size: 24rpx;
				padding-left: 10rpx;
				padding-right: 10rpx;
				border-radius: 8rpx;
				margin-right: 15rpx;
			}
			.titles{
				width: 380rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}
	
		.subtitle-text {
			font-size: 22rpx;
			width: 400rpx;
			font-weight: 500;
			color: #666666;
		}
	
		.buy-btn {
			width: 140rpx;
			line-height: 60rpx;
			background: #fb4d44;
			border-radius: 15rpx;
			font-size: 26rpx;
			font-weight: 500;
			color: #ffffff;
		}
	
		.progress-text {
			color: #333;
			font-size: 20rpx;
	
			padding: 8rpx;
			border-radius: 10rpx;
			;
	
		}
	
		// 价格
		.price {
			color: #ff0000;
			font-weight: 600;
	
			&::before {
	
				font-size: 20rpx;
			}
		}
	
		.origin-price {
			color: #c4c4c4;
			font-size: 24rpx;
	
			&::before {
	
				font-size: 20rpx;
			}
		}
	}
	
	.menu-category-box,
	.menu-swiper-box {
		position: relative;
		background: #fff;
	
		.menu-swiper-item {
			background: #fff;
			height: 100%;
			width: 100%;
		}
	
		.menu-tab-box {
			.tab-list {
				font-size: 26rpx;
				font-weight: 500;
				color: rgba(51, 51, 51, 1);
				margin: 20rpx 0;
	
				.tab-img {
					width: 80rpx;
					height: 80rpx;
					margin-bottom: 10rpx;
	
				}
	
				.tab-text {
					font-size: 26rpx;
	
				}
			}
		}
	
		.menu-category-dots {
			display: flex;
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			bottom: 10rpx;
	
			.category-dot {
				width: 12rpx;
				height: 12rpx;
				background: #eeeeee;
				border-radius: 50%;
				margin-right: 10rpx;
			}
	
			.category-dot-active {
				width: 12rpx;
				height: 12rpx;
				background: #e9b461;
				border-radius: 50%;
				margin-right: 10rpx;
			}
		}
	}
	
	.detailtitle-active {
		color: #D44C1C;
	}
	.imagestyle {
		border-radius: 1rpx;
		width: 750rpx;
		height: 330rpx;
	}
	.marketPrice{
		text-decoration: line-through;
		color: #919191;
	}
</style>